<template>
  <div>
    <el-card class="tree-card">
      <!-- 一级部门 -->
      <tree-tool :company="company" @addDeps="showDia" />
      <hr>
      <!-- 二级部门 -->
      <el-tree
        :data="depts"
        :props="defaultProps"
        @node-click="handleNodeClick"
      >
        <tree-tool
          slot-scope="{ data }"
          :company="data"
          :is-level="true"
          @addDeps="showDia"
          @close="close"
        />
      </el-tree>
    </el-card>

    <!-- 添加部门 -->
    <add-depts
      v-if="dialogFormVisibleAdd"
      :type="type"
      :tree-node="treeNode"
      :dialog-form-visible-add.sync="dialogFormVisibleAdd"
      @close="close"
    />
  </div>
</template>
<script>
import { getDepartmentApi } from '@/api/departments'
import { tranListToTreeData } from '@/utils'
import addDepts from './components/add-dept.vue'

import treeTool from './components/tree-tool.vue'

// import mixinPermission from '@/mixins/permission'
export default {
  components: {
    treeTool,
    addDepts
  },
  // mixins: [mixinPermission],
  data() {
    return {
      depts: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      company: {},

      dialogFormVisibleAdd: false,
      treeNode: null,
      type: null
    }
  },
  created() {
    this.getDepartment()
  },
  methods: {
    handleNodeClick(data) {
      // console.log(data)
    },
    async getDepartment() {
      const res = await getDepartmentApi()
      // console.log(res, 5555)
      this.depts = tranListToTreeData(res.depts, 'pid', 'id')
      // console.log(this.depts, 888888)
      this.company = { name: res.companyName, manager: '负责人', id: '' }
    },
    /* 显示对话框 */
    showDia(data, type) {
      console.log(data, type, 111112222)
      this.dialogFormVisibleAdd = true
      this.treeNode = data
      this.type = type
    },
    close() {
      this.getDepartment()
    }
  }
}
</script>
<style scoped>
.tree-card {
  padding: 30px 140px;
  font-size: 14px;
}
</style>
